<template>
  <div>
   <Row class="margin-top-20">
      <i-form :label-width="80" :model="search" inline>
        <Form-item label="终端SN码">
          <i-select v-model="search.sn" clearable size="default" placeholder="全部">
            <i-option v-for="item in sn_list" :key="item.device_sn" :value="item.device_sn">{{ item.device_sn }}</i-option>
          </i-select>
        </Form-item>
        <i-button type="success" icon="ios-search" @click="handleSearch">查询</i-button>
      </i-form>
    </Row>
    <Row>
       <i-table :columns="columns" :data="data"></i-table>
      <Page class="fr margin-top-20" show-total :total="page.total" :page-size="page.size" :current="page.current" :show-elevator="true" @on-change="handleDocumentPage"></Page>
    </Row>
  </div>
</template>

<script>
import { historyTerminalInit, historyTerminalSearch, historyTerminalPage } from '@/api/terminal';

export default {
  data() {
    return {
      data: [],
      sn_list: [],
      columns: [
        { title: '终端SN码', align: 'center', key: 'speakerid' },
        { title: '金额', align: 'center', key: 'price' },
        { title: '支付类型', align: 'center', render: (h, params) => {
          return h('span', null, params.row.price_type == 1 ? '支付宝支付' : params.row.price_type == 2 ? '微信支付' : params.row.price_type == 3 ? '云支付' : params.row.price_type == 4 ? '余额支付' : params.row.price_type == 5 ? '微信储值' : params.row.price_type == 6 ? '微信买单' : params.row.price_type == 7 ? '银联刷卡' : '通用' )
        }},
        { title: '支付时间', align: 'center', key: 'datetime' },
        { title: '记录状态', align: 'center', render: (h,params) => {
          return h('span', null, params.row.used == 0 ? '未取走' : params.row.used == 1 ? '已取走' : '无')
        }}
      ],
      page: {
        size: 0,
        current: 1,
        total: 0
      },
      search: {
        sn: ''
      }
    }
  },
  methods: {
     handleDocumentInit() {
      historyTerminalInit(this.$route.query.store_id).then(res => {
        if (res.data.code === 0) {
          this.data = res.data.data.list.data.records
          this.page.size = res.data.data.list_count
          this.page.current = res.data.data.page
          this.page.total = res.data.data.total_count
          this.sn_list = res.data.data.sn
        } else {
          this.$Message.error(res.data.message)
        }
      })
    },
    handleSearch() {
      historyTerminalSearch(this.$route.query.store_id, this.search).then(res => {
        if (res.data.code === 0) {
          this.data = res.data.data.list.data.records
          this.page.size = res.data.data.list_count
          this.page.current = res.data.data.page
          this.page.total = res.data.data.total_count
        } else {
          this.$Message.error(res.data.message)
        }
      })
    },
    handleDocumentPage(v) {
      historyTerminalPage(this.$route.query.store_id, this.search, v).then(res => {
        if (res.data.code === 0) {
          this.data = res.data.data.list.data.records
          this.page.size = res.data.data.list_count
          this.page.current = res.data.data.page
          this.page.total = res.data.data.total_count
        } else {
          this.$Message.error(res.data.message)
        }
      })
    }
  },
  created() {
    this.handleDocumentInit();
  }
}
</script>

<style lang="less" scoped>
  @import '../../terminal.less';
</style>
